<template>
  <div class="all">
    <el-container>
      <el-header height="400px">
        <div class="system">
          <div class="systempicture"></div>
          <div class="ziti">酒店辅助订购</div>
        </div>
        <div class="toplab">
          <ul>
            首页
          </ul>
          <ul>
            酒店搜索
          </ul>
          <ul><a href="javascript:void(0)" @click="login">登录</a></ul>
          <ul @click="register"><a href="javascript:void(0)" @click="register">注册</a></ul>
          <ul ><a href="javascript:void(0)" @click="personal">个人中心</a></ul>
          <ul @click="logout"><a href="javascript:void(0)" @click="logout">退出登录</a></ul>
          <ul>
            <div class="headpicture"></div>
          </ul>
        </div>
        <!-- 条件搜索 -->
        <div class="condition">
          <div class="postioncondition">
            <div class="postiontitle">位置：</div>
            <!-- <el-select v-model="conditionMap.province" filterable clearable placeholder="省份">
              <el-option v-for="item in provinceList" :key="item" :label="item" :value="item">
              </el-option>
            </el-select> -->
            <el-select v-model="conditionMap.province" filterable clearable placeholder="省份" @change="provicechange">
              <el-option v-for="item in provinceList" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <el-select v-model="conditionMap.city" filterable clearable placeholder="城市" @change="citychange">
              <el-option v-for="item in cityList" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <el-input style="width: 300px;margin-right: 20px;" placeholder="如位置/酒店名" v-model="conditionMap.hotel_name"
              clearable>
              <template slot="prepend">关键词</template>
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="refreshData">搜索</el-button>
          </div>
          <div class="starcondition">
            <div class="postiontitle" style="margin-right: 50px;">星级：</div>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
              @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="conditionMap.hotel_starList" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="star in starOptions" :label="star.val" :key="star.val">{{ star.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="pricecondition">
            <div class="postiontitle" style="margin-right: 30px;">房价：</div>
            <el-radio-group v-model="radio" @input="priceconditionChange">
              <el-radio :label="1">0--200</el-radio>
              <el-radio :label="2">200--600</el-radio>
              <el-radio :label="3">600--1000</el-radio>
              <el-radio :label="4">自定义：</el-radio>
            </el-radio-group>
            <div class="numrange">
              <el-input-number controls-position="right" v-model="conditionMap.priceleft" :step="10"></el-input-number>
            </div>
            <div class="pricerange">---</div>
            <div class="numrange">
              <el-input-number controls-position="right" v-model="conditionMap.priceright" :step="10"></el-input-number>
            </div>
            <el-button type="primary" icon="el-icon-search" @click="refreshData">确定</el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <!-- <el-checkbox-group v-model="conditionsss"> -->
        <!-- <el-checkbox-button @change="orderConditionChangeOne(con.val)" v-for="con in conditions" :label="con.val"
            :key="con.val">
            <div style="display: flex;">
              <el-checkbox v-model="con.val"></el-checkbox>
              <div>{{ con.name }}</div>
            </div>
          </el-checkbox-button> -->
        <div class="codtfa" style="display: flex; margin-top: 10px;">
          <div class="codt" v-for="con in conditions" :key="con.val">
            <el-checkbox @change="orderch(con.val, con.checked)" v-model=con.checked></el-checkbox>
            <el-checkbox-button :disabled=!con.checked @change="orderConditionChangeOne(con.val)" :label="con.val">{{
              con.name }}</el-checkbox-button>
          </div>
        </div>
        <!-- </el-checkbox-group> -->
        <div class="hotellists">
          <div class="hotellist" v-for="hotel in hotLists" :key="hotel.hotel_id">
            <div class="hotelpicture"></div>
            <div class="hotelinfos">
              <div :title=hotel.hotel_name>{{ hotel.hotel_name }}</div>
              <div class="address">
                <!--  -->
                <!-- <div>{{ hotel.addr.sp }}</div> -->
                <div><span style="font-size: 30px; color: red;">{{ hotel.hotel_star }}</span>星酒店</div>
                <!-- <div>近天安门东地铁站 · 天安门/王府井地区</div> -->
              </div>
            </div>
            <div class="hotelp">
              <div><span>{{ hotel.goodCommentCount == null ? "0" : hotel.goodCommentCount }}</span>%好评</div>
              <div>共<span>{{ hotel.commentCount }}</span>条点论</div>
              <div>"{{ hotel.com_text }}"</div>
            </div>
            <div class="hotelright">
              <div class="price">￥<span>{{ hotel.minPrice }}</span>起</div>
              <el-button class="butt" @click="yuding(hotel.hotel_id)" type="primary" >点击预定</el-button>
            </div>
          </div>
        </div>
        <div :class="mappos ? 'mapshow' : 'mapg'">
          <mapPLJX></mapPLJX>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
const that = this;
import { gethotelList } from '@api/pagehotel'
import mapPLJX from '../../components/mapPLJX.vue'
import { register } from '../../api/pagehotel';
import { loginout } from '@api/pagehotel'
import { selectProvince } from '@api/pagehotel'
import { selectCity } from '@api/pagehotel'
export default {
  // 组件名称
  name: "bigPage",
  components: {
    mapPLJX
  },
  data() {
    return {
      provinceList:[],
      cityList:[],
      conditionsss: [],
      value: "",
      userId:'',
      mappos: true,
      checkAll: false,
      condition: "一星",
      conditions: [
        {
          name: "价格  低 --> 高",
          label: "ASC",
          val: 0,
          checked: false
        },
        {
          name: "星级  高 --> 低",
          label: "DESC",
          val: 1,
          checked: false
        },
        {
          name: "好评数  高 --> 低",
          label: "DESC",
          val: 2,
          checked: false
        },
        {
          name: "评论数  高 --> 低",
          label: "DESC",
          val: 3,
          checked: false
        },
      ],
      checkedCities: [],
      isIndeterminate: true,
      starOptions: [
        {
          name: '一星',
          val: 1
        },
        {
          name: '二星',
          val: 2
        },
        {
          name: '三星',
          val: 3
        },
        {
          name: '四星',
          val: 4
        },
        {
          name: '五星',
          val: 5
        },
      ],
      radio: 4,
      conditionMap: {
        pageSize: 10,
        pageNum: 1,
        hotel_name: '',
        priceleft: '90',
        priceright: '220',
        country: '中国',
        province: '',
        city: '',
        addrLike: '',
        is_parking: '',
        hotel_starList: [1, 2, 3, 4, 5],
        stareOrder: '',
        minPriceOrder: '',
        goodCommentOrder: '',
        commentOrder: ''
      },
      conchecked: true,
      hotLists: []
    };
  },
  methods: {
    handleCheckAllChange(val) {
      //sessionStorage.setItem()
      this.conditionMap.hotel_starList = val ? [1, 2, 3, 4, 5] : [];
      this.isIndeterminate = false;
      this.refreshData();
    },
    handleCheckedCitiesChange(value) {
      console.log(this.conditionMap.hotel_starList);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.starOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.starOptions.length;
      this.refreshData();
    },
    refreshProvinceList(){
      selectProvince().then(res=>{
        this.provinceList = res.data
      })
    },
    refreshCityList(cityName){
      selectCity(cityName).then(res=>{
        this.cityList = res.data
      })
    },
    refreshData() {
      gethotelList(this.conditionMap).then(res => {
        if (res.code) {
          this.hotLists = res.data
          console.log(this.hotLists);
        } 
        else {
          this.$message({ showClose: true, message: '用户未登录', type: 'warning' });
          this.$router.push({ name: 'login' })
        }
      })
    },
    login() {
      this.$router.push({ name: 'login' })
    },
    register() {
      this.$router.push({ name: 'register' })
    },
    personal(){
      if(this.userId==''||this.userId==null){
        this.$message({ showClose: true, message: '用户未登录', type: 'warning' });
      }else{
        this.$router.push({ name: 'personalCenter' })
      }
    },
    logout() {
      var id = sessionStorage.getItem("userId");
      if (id == '' || id == null) {
        this.$message({ showClose: true, message: '用户未登录', type: 'warning' });
      } else {
        loginout(id).then(res => {
          if (res.code) {
            this.$message({ showClose: true, message: '退出成功', type: 'success' });
            sessionStorage.setItem("userId","")
          }
        })
      }
    },
    citychange(val) {//改变城市
      this.conditionMap.city=val
      this.refreshData()
    },
    provicechange(val) {//改变省份
      this.conditionMap.province=val
      selectCity(val).then(res=>{
        this.cityList = res.data
      })
      this.refreshData()
    },
    priceconditionChange(val) {//修改价格范围
      if (val == 1) {
        this.conditionMap.priceleft = 0
        this.conditionMap.priceright = 200
      } else if (val == 2) {
        this.conditionMap.priceleft = 200
        this.conditionMap.priceright = 600
      } else if (val == 3) {
        this.conditionMap.priceleft = 600
        this.conditionMap.priceright = 1000
      } else {
        this.conditionMap.priceleft = 0
        this.conditionMap.priceright = 0
      }
      this.refreshData();
    },
    orderConditionChangeOne(val) {
      console.log(val);
      if (val == 0) {
        this.conditionMap.minPriceOrder = this.conditions[val].label == 'DESC' ? 'ASC' : 'DESC';
        this.conditions[val].label = this.conditionMap.minPriceOrder;
        // this.conditionMap.minPriceOrder =this.conditionMap.minPriceOrder == "ASC" ? 'DESC' : 'ASC';
        (this.conditions[0].name == '价格  低 --> 高') ? this.conditions[0].name = '价格  高 --> 低' : this.conditions[0].name = '价格  低 --> 高'
      } else if (val == 1) {
        this.conditionMap.stareOrder = this.conditions[val].label == 'DESC' ? 'ASC' : 'DESC';
        this.conditions[val].label = this.conditionMap.stareOrder;
        (this.conditions[1].name == '星级  低 --> 高') ? this.conditions[1].name = '星级  高 --> 低' : this.conditions[1].name = '星级  低 --> 高'
      } else if (val == 2) {
        this.conditionMap.goodCommentOrder = this.conditions[val].label == 'DESC' ? 'ASC' : 'DESC';
        this.conditions[val].label = this.conditionMap.goodCommentOrder;
        (this.conditions[2].name == '好评  低 --> 高') ? this.conditions[2].name = '好评  高 --> 低' : this.conditions[2].name = '好评  低 --> 高'
      } else {
        this.conditionMap.commentOrder = this.conditions[val].label == 'DESC' ? 'ASC' : 'DESC';
        this.conditions[val].label = this.conditionMap.commentOrder;
        // (this.conditionMap.commentOrder == 'DESC') ? this.conditionMap.commentOrder = 'ASC' : this.conditionMap.commentOrder = 'DESC';
        (this.conditions[3].name == '评论数  低 --> 高') ? this.conditions[3].name = '评论数  高 --> 低' : this.conditions[3].name = '评论数  低 --> 高'
      }
      this.refreshData();
    },
    orderch(val, checked) {
      // if(!checked){this.conditions[val].label=''}
      switch (val) {
        case 0: if (!checked) { this.conditionMap.minPriceOrder = '' } else { this.conditionMap.minPriceOrder = this.conditions[val].label } break;
        case 1: if (!checked) { this.conditionMap.stareOrder = '' } else { this.conditionMap.stareOrder = this.conditions[val].label } break;
        case 2: if (!checked) { this.conditionMap.goodCommentOrder = '' } else { this.conditionMap.goodCommentOrder = this.conditions[val].label } break;
        case 3: if (!checked) { this.conditionMap.commentOrder = '' } else { this.conditionMap.commentOrder = this.conditions[val].label } break;
      }
      this.refreshData();
    },
    handleTabFix() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 480) {
        this.mappos = false
      } else {
        this.mappos = true
      }
    },
    yuding(val){
      let id = sessionStorage.getItem("userId")
      if(id==''||id==null){
        this.$message({ showClose: true, message: '用户未登录', type: 'warning' });
        this.$router.push({ name: 'login' })
      }else{
        //跳转到房间页面
        this.$router.push({ name: 'hotel_lhj',params:{hotel_id:val}})
      }
    }
  },
  mounted() {
    this.refreshData();
    this.refreshProvinceList();
    this.userId=sessionStorage.getItem("userId");
    window.addEventListener('scroll', this.handleTabFix, true)
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener('scroll', this.handleTabFix, true)
    next()
  },
};
</script>

<style scoped>
html *,
::after,
::before {
  box-sizing: content-box;
}

a {
  text-decoration: none;
  color: blue;
}

.all {
  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;

}

.system {
  display: flex;
  height: 100px;
  align-items: center;
}

.systempicture {
  background-image: url("https://i02piccdn.sogoucdn.com/e99e2538b1bf4686");
  height: 70px;
  width: 70px;
  background-size: cover;
  margin-left: 40px;
  margin-right: 150px;
}

.ziti {
  margin: 0;
  padding: 0;
  line-height: 1.7em;
  letter-spacing: 1px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 30px;
  color: #7029ce;
}

.toplab {
  background-color: rgb(137, 192, 234);
  height: 70px;
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.toplab ul {
  width: 80px;
  /* display: inline-block; */
}

.headpicture {
  background-image: url("https://i02piccdn.sogoucdn.com/e99e2538b1bf4686");
  height: 50px;
  width: 50px;
  background-size: cover;
}

.condition {
  height: 600px;
}

.condition>div {
  padding: 10px 20px;
  border: solid 1px #000000;
  margin: 10px;
  display: flex;
  line-height: 40px;
  height: 40px;
}

.postioncondition {
  display: flex;
  line-height: 40px;
}

.postioncondition .el-select {
  margin: 0px 50px;
  width: 100px;
}

.pricecondition .el-radio-group {
  line-height: 50px;
  margin-left: 20px;
}

.pricecondition .el-radio__input.is-checked+.el-radio__label {
  color: #409eff;
}

.numrange {
  margin: auto 10px;
}

.numrange .el-input-number {
  width: 100px;
}

.el-checkbox-group .codtfa div:first-child {
  border-radius: 4px 0 0 4px;
}


.codt {
  display: flex;
  line-height: 40px;
  border: solid 1px rgb(0, 0, 0);
  padding-left: 30px;
  padding-right: 40px;
  border-right: 0px;
}

.codt .el-checkbox {
  margin-right: 10px;
}

.codtfa div:last-child {
  border-radius: 0 4px 4px 0;
  border-right: 1px;
}

.el-checkbox-button__inner {
  border: 0px;
  color: #37e;
}

.hotellists {
  background-color: rgb(255, 255, 255);
}

.hotellist {
  display: flex;
  padding: 20px;
  /* border: solid 1px rgb(15, 44, 67); */
  width: 900px;
  border-bottom: solid 1px rgb(211, 218, 223);
  ;
}

.hotelpicture {
  height: 150px;
  width: 150px;
  background-image: url("https://i02piccdn.sogoucdn.com/e99e2538b1bf4686");
  background-size: cover;
}

.hotelinfos {
  width: 380px;
  margin-left: 15px;
}

.hotelinfos>div:first-child {
  font-size: 24px;
  color: #37e;
  margin: 10px 10px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.address {
  display: flex;
}

.hotelp {
  text-align: center;
  width: 200px;
}

.hotelp>div:nth-child(1) span {
  font-size: 30px;
  color: #37e;
}

.hotelp>div {
  margin: 16px 10px;
}

.hotelp>div:nth-child(3) {
  font-size: 18px;
  color: #37e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 190px;
}

.hotelright {
  height: 36px;
  width: 130px;
  text-align: center;
  margin-left: 20px;
  margin-top: 10px;
}

.price {
  color: rgb(253, 62, 62);
  margin-bottom: 50px;
}

.price span {
  font-size: 32px;
}

.butt {
  height: 36px;
  width: 130px;
}

.mapshow {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 500px;
  right: 30px;
}

.mapg {
  width: 500px;
  height: 500px;
  position: fixed;
  top: 20px;
  right: 30px;
}
</style>
